<template>
  <div>
    <h1>App组件</h1>
    <div class="list">
      <Content
        v-for="item in contentList"
        :key="item.id"
        v-bind="item"
      ></Content>
    </div>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {
      contentList: [
        { id: 1, type: "美食", list: ["火锅", "饺子", "干煸土豆丝"] },
        { id: 2, type: "游戏", list: ["apex", "owl", "gta"] },
        {
          id: 3,
          type: "电影",
          list: ["肖申克的救赎", "泰坦尼克号", "哈利波特"],
        },
      ],
    };
  },
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-around;
}
</style>
37.插槽的引入